<template>
	<view :style="{paddingTop: systemBarHeight + 'px',backgroundColor:bgColor}" class="header">
		<view class="headerInner" :style="{marginRight:noMargin ? 0 :barWidth + 'px',minHeight:barHeight + 'px'}">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	import {
		getWXStatusHeight
	} from '@/utils/index.js'

	export default {
		props: {
			bgColor: {
				type: String,
				default: '#131319'
			},
			noMargin:{
				tyoe:Boolean,
				default:false
			}
		},
		data() {
			return {
				systemBarHeight: 0,
				// 胶囊的宽度
				barWidth: 0,
				barHeight: 0,
			}
		},
		created() {
			this.getSysteminfo()
			let obj = getWXStatusHeight()
			this.barHeight = obj.barHeight
			this.barWidth = obj.barWidth + 3
		},
		methods: {
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight + 3;
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		.headerInner {
			width: 100%;
			box-sizing: border-box;
		}
	}
</style>